<template>
    <div id="EChartsCPU" ref="EChartsCPU" style="height: 300px;"></div>
</template>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
    data() {
        return {
            postData: {
                opera: 'hostCpuMemory',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid": "850084AF585C4BA89C1DD3E44FB856B4",
                },
            },
            date : this.testData2(),
            EChartsCPU: {},
            CPUx: 0,
            CPUy: 0,
            EChartsOption: {
                animationDuration: 100,
                animationEasingUpdate: 'quinticInOut',
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: 130,
                    left: '2%',
                    right: '5%',
                    // bottom: 20,
                    height: '50%',
                    width: '90%',
                    containLabel: true
                },
                title: {
                    text: 'CPU使用率',
                    textStyle: {
                        color: 'rgb(200, 200, 200)',
                        fontWeight: 'bold',
                        fontSize: 20,
                        lineHeight: 40,
                    },
                    subtext: "0 {b|%}",
                    subtextStyle:{
                        fontStyle: 'normal',
                        fontWeight: 'bold',
                        fontSize: 40,
                        color: '',
                        formatter: [
                            '{b|%}'
                        ].join('\n'),
                        rich: {
                            b:{
                                fontStyle: 'normal',
                                fontWeight: 'bold',
                                fontSize: 30,
                                color: 'rgb(64, 176, 124)'
                            }
                        },
                    },
                    left: 'center'
                },
                legend: {
                    data: ['时间']
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
                    data: this.testData(),
                    boundaryGap: ['5%', '5%'],
                    // splitLine: {
                    //     show: false
                    // },
                    // axisLabel: {
                    //     show: false,
                    //     interval: 14
                    // }
                },
                yAxis: {
                    type: 'value',
                    max: 100,
                    min: 0,
                    interval: 25,
                    boundaryGap: ['5%', '5%'],
                    splitLine: {
                        show: false
                    },
                    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
                },
                series: [{
                    name: 'CPU使用率',
                    data: this.date,
                    type: 'line',
                    color: 'rgb(130, 187, 219)',
                    showSymbol: false,
                    // areaStyle: {
                    //     color: {
                    //         colorStops: [{
                    //             offset: 0, color: 'rgb(255, 158, 68)'
                    //         },
                    //          {
                    //             offset: 1,
                    //             color: 'rgb(255, 70, 131)'
                    //         }],
                    //         global: false
                    //     }
                    // },
                    markLine: {
                        symbol:'none',
                        silent: false,
                        lineStyle: {
                            opacity: 0.4,
                            type: 'dotted'
                        },
                        data: [{
                            name: '123',
                            yAxis: 25
                        }, {
                            yAxis: 50
                        }, {
                            yAxis: 75
                        }, {
                            yAxis: 100
                        }]
                    }
                }]
            },
            timerName: 'EChartsCPU',
            timerEventName: 'timerEChartsCPU',
            timerInterval: 1000 * 60
        }
    },
    created() {
        this.getData();
        

        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
                this.getData();
                this.date.shift();
                let _new = Math.floor((Math.random() * 30) + 35);
                this.date.push(_new);
                this.EChartsOption.xAxis.data.shift();
                this.EChartsOption.xAxis.data.push(axisData);
                this.EChartsCPU.setOption({
                    title: {
                        subtext: `${_new} {b|%}`,
                        subtextStyle: {
                            color: this.colorMethod(_new)
                        }
                    },
                    xAxis: {
                        data: this.EChartsOption.xAxis.data
                    },
                    series: {
                        data: this.date
                    }
                })
            }
        });

        bus.$on('selectedMonID', msg => {
            this.postData.filters.monid = msg;
        });
    },
    mounted() {
        this.EChartsCPU = this.$echarts.init(this.$refs.EChartsCPU);
        this.drawCPULine();

        window.onresize = () => {
            // return console.log(`${window.innerWidth} x ${window.innerHeight}`);
        }
    },
    computed: {
        postDataFn() {
            return {
                postData : JSON.stringify(this.postData)
            }
        }
    },
    methods: {
        colorMethod(memoryNow) {
            if (memoryNow <= 50) {
                return '#67c23a';
            } else if (memoryNow <= 75) {
                return '#e6a23c';
            } else {
                return '#f56c6c';
            }
        },
        getData(){
            if (this.postData.filters.monid == '') {
                this.date = [];
            } else {
                fetchData(
                    this.postDataFn
                ).then((res) => {
                    if (res.data.length > 0) {
                        // this.date = [res.data[0].ALL_USED];
                        // if (res.data.length > 0) {
                        //     this.EChartsOption.xAxis.data.shift();
                        //     let _str = res.data[0].CPU_RECORD_TIME.replace(/\s+/g,"\n");
                        //     this.EChartsOption.xAxis.data.push(_str);
                        // }
                    }
                });
            }
        },
        drawCPULine(){
            this.EChartsCPU.setOption(this.EChartsOption);
        },
        testData() {
            let _arr = [];
            for (let i = 0; i < 60; i++) {
                _arr.push('');
            }
            
            return _arr;
        },
        testData2() {
            let _arr = new Array(60);
            return _arr;
        }
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
    },
    watch:{
        
    }
}
</script>

<style scoped>

</style>